<template>
	<el-dialog
    v-model="dialogVisible"
    width="60%"
				style="background-color: rgba(8, 64, 132, 0.9);"
				:before-close="handleClose"
  >
		<div class="pie_box" ref="echartDom"></div>
 </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,toRaw,watchEffect,defineEmits,defineProps } from "vue";
const dialogVisible = ref(false)
// 接收参数
const props = defineProps({
housingSupplyStatsData: {
	type: Object,
	default: () => {},
},
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['closePieDialog'])
// 字体自适应方法
const pxToRem = (px: number) => {
	const scale = document.documentElement.clientWidth / 1920;
	return Math.round(px * Math.min(scale, 3));
};
// echarts初始化渲染
let legendStyle = props.housingSupplyStatsData.legendStyle//图例
let gridStyle = props.housingSupplyStatsData.gridStyle//网格
let seriesData = props.housingSupplyStatsData.seriesData//serires数据
let seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置


const getEchart = () => {
	dialogVisible.value = true;
if (echartDom.value) {
	myChart.value = echarts.init(echartDom.value); 
			// 图例配置
			const legendConfig = {
					show: legendStyle.show,
					icon: legendStyle.icon,
					left: pxToRem(legendStyle.left)? pxToRem(legendStyle.left):legendStyle.left,
					right:pxToRem(legendStyle.right),
					top: pxToRem(legendStyle.top),
					bottom: pxToRem(legendStyle.bottom),
					itemWidth: pxToRem(legendStyle.itemWidth),
					itemHeight: pxToRem(legendStyle.itemHeight),
					itemGap: pxToRem(legendStyle.itemGap),
					textStyle: {
							color: "#fff",
							fontSize: pxToRem(12),
							rich:{
									one:{
											width:pxToRem(100),
									},
									two:{
											width:pxToRem(50),
									},
									three:{
											width:pxToRem(50),
									}
							},
							padding: [0, 0, pxToRem(-3), 0],
					},
			};
				// 追加项
				for(let j in legendStyle){
					if(j != 'show' && j != 'icon'  && j != 'left'  && j != 'right' && j != 'top' && j != 'itemWidth'  && j != 'itemHeight'   && j != 'itemGap'  && j != ' textStyle'){
							legendConfig[j] = toRaw(legendStyle[j])
					}
			}
			// series配置
		let seriesConfig = seriesData.map((item,index) => {
							return{
									name:'',
									type:'pie',
									radius:pxToRem(toRaw(seriesStyle.radius)[0]) == 0?[pxToRem(0), pxToRem(205)]:[pxToRem(155), pxToRem(205)],
       		center: ['50%', '48%'],
									itemStyle: {
											borderRadius: pxToRem(2),
											backgroundColor:'red'
									},
									data:toRaw(seriesData[index])  
							}
			})
			// 追加项
			for(let i in seriesStyle){
					if(i != 'radius' && i != 'center'  && i != ' type'  && i != ' seriesData'){
							seriesConfig[0][i] = toRaw(seriesStyle[i])
					}
			}
			//绘图
			const option = {
					tooltip: {
							trigger: "item",
							axisPointer: {
									type: "line",
									lineStyle: {
											color: "rgba(40,252,255,0.6)",
											shadowBlur: 10,
											shadowColor: "rgba(0, 0, 0, 0.9)",
									},
							},
							position: function (point, params, dom, rect, size) {
									return [point[0], '5%']; // 示例：将 tooltip 定位在鼠标的水平位置和视窗顶部 10% 的位置
							},
							textStyle: {
									color: "#fff",
									fontSize: pxToRem(18),
							},
							backgroundColor: "rgba(8, 64, 132, 0.9)",
							borderColor:'#fff',
					},
							legend: legendConfig,
							series:seriesConfig
			}
	myChart.value.setOption(option);
}
};
const updateChart = () => {
if (myChart.value) {
	myChart.value.dispose(); // 销毁旧图表实例
}
legendStyle = props.housingSupplyStatsData.legendStyle//图例
gridStyle = props.housingSupplyStatsData.gridStyle//网格
seriesData = props.housingSupplyStatsData.seriesData//serires数据
seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置 
getEchart();
};

watchEffect(() => {
updateChart();
});
const handleClose = () => {
	dialogVisible.value = false
	emit('closePieDialog',dialogVisible.value)
}

onMounted(() => {
getEchart();
window.addEventListener("resize", () => {
	if (myChart.value) {
			myChart.value.dispose(); // 销毁旧图表实例
	}
	getEchart(); // 创建新的图表实例
});
});

onUnmounted(() => {
window.removeEventListener("resize", () => {
	if (myChart.value) {
			myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
	}
});
});
</script>

<style scoped lang="less">
.pie_box{
	width: 100%;
	height: 680px;
}
.echarts-background {
background-color: transparent !important;
}
</style>
